<form #systemConfigFrom="ngForm" class="compact">
    <section class="form-block" style="margin-top:0px;margin-bottom:0px;">
        <label class="section-title" *ngIf="showSubTitle">{{ 'CONFIG.SCANNING.TITLE' | translate }}</label>
        <div class="form-group">
            <label>{{ 'CONFIG.SCANNING.DB_REFRESH_TIME' | translate }}</label>
            <clr-tooltip *ngIf="!isClairDBFullyReady">
              <clr-icon shape="warning" class="is-warning" size="22"></clr-icon>
              <clr-tooltip-content [clrPosition]="'top-right'" [clrSize]="'md'" *clrIfOpen>
                <span>{{'CONFIG.SCANNING.DB_NOT_READY' | translate }}</span>
              </clr-tooltip-content>
            </clr-tooltip>
            <clr-dropdown *ngIf="isClairDBFullyReady && showScanningNamespaces" style="margin-top:-8px;" class="clr-dropdown-override">
                <button class="btn btn-link btn-font" clrDropdownToggle>
                  {{ updatedTimestamp | date:'MM/dd/y HH:mm:ss' }}
                  <clr-icon shape="caret down"></clr-icon>
                </button>
                <clr-dropdown-menu [clrPosition]="'bottom-right'" style="min-width:300px;">
                    <div *ngFor="let nt of namespaceTimestamps" class="namespace">
                      <span class="label label-info">{{nt.namespace}}</span>
                      <span>{{ convertToLocalTime(nt.last_update) | date:'MM/dd/y HH:mm:ss'}}</span>
                    </div>
                </clr-dropdown-menu>
            </clr-dropdown>
            <span class="label label-blue" *ngIf="isClairDBFullyReady && !showScanningNamespaces">{{ updatedTimestamp | date:'MM/dd/y HH:mm:ss' }}</span>
        </div>
        <div class="form-group">
            <label for="scanAllPolicy">{{ 'CONFIG.SCANNING.SCAN_ALL' | translate }}</label>
            <div class="select">
                <select id="scanAllPolicy" name="scanAllPolicy" [disabled]="!editable" [(ngModel)]="scanningType">
                    <option value="none">{{ 'CONFIG.SCANNING.NONE_POLICY' | translate }}</option>
                    <option value="daily">{{ 'CONFIG.SCANNING.DAILY_POLICY' | translate }}</option>
                </select>
            </div>
            <input type="time" name="dailyTimePicker" required [disabled]="!editable" [hidden]="!showTimePicker" [(ngModel)]="dailyTime" />
            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right">
                <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                <span class="tooltip-content">{{'CONFIG.TOOLTIP.SCANNING_POLICY' | translate}}</span>
            </a>
            <div class="btn-scan-right">
                 <button class="btn btn-primary btn-sm" (click)="scanNow()" [disabled]="!scanAvailable">{{ 'CONFIG.SCANNING.SCAN_NOW' | translate }}</button><br>
                 <span *ngIf="!scanAvailable">{{ 'CONFIG.SCANNING.NEXT_SCAN' | translate }} {{ nextScanTimestamp | date:'y/MM/dd HH:mm' }}</span>
            </div>
        </div>
    </section>
</form>